<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>加入组</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}"/>

    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
    <script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}" crossorigin="anonymous"></script>
    <style>
        #searchGroupBox {
            margin-top: 20px;
        }
        #searchGroup {
            text-wrap: nowrap;
            margin-left: 10px;
        }
        #group_search_input {
        }
        #groupList {
            width: 100%;
        }
        #groupList > div {
            width: 30%;
            float: left;
            margin: 10px;
        }

    </style>
</head>
<body>
<!-- 在 body 中添加搜索框和按钮 -->
<div class="container" id="searchGroupBox">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <form class="d-flex">
                <input class="form-control me-1" type="search" placeholder="请输入邀请码..." aria-label="Search" id="group_search_input">
                <button class="btn btn-outline-primary" id="searchGroup">查找组</button>
            </form>
        </div>
    </div>
</div>


<div id="groupList" >



</div>

<script type="module">
    import {POST,GET,POST_FORM} from "/js/request.js";


    let lastSearchCode = "";
    // 通知父容器，更新可“去完成”数量
    function noticeUpdateSubmittableCount() {
        window.parent.postMessage("UPDATE_SUBMITTABLE_COUNT_EVENT", '*');
    }
    function showGroupItemList(findGroupItems=[]) {
        // 清理之前的
        let groupItemListBox = $("#groupList");
        groupItemListBox.html('')
        if ( findGroupItems instanceof Array ) {
            findGroupItems.forEach(groupWrap=>{
                groupItemListBox.append(`
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">${groupWrap.groupItem.name}</h5>
                            <p class="card-text">${groupWrap.count}人已经加入</p>
                            <button href="#" class="btn btn-primary joinGroupButton" group_id="${groupWrap.groupItem.id}" ${groupWrap.isJoined?'disabled':''} >${groupWrap.isJoined?'已加入':'加入'}</button>
                        </div>
                    </div>
                </div>
                `)
            })
        }
    }
    function refreshJoinGroup(code = "") {
        GET("/groupItem/find?code="+code).then(result=>{
            if (result.success && result.data != null) {
                showGroupItemList([result.data]);
            }else {
                alert("找不到组信息");
            }
        })
    }

    $("#searchGroup").click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        let code = ( $("#group_search_input").val()??'').trim();
        if ( code.length == 0 ) {
            alert("邀请码不能为空！");
            return;
        }
        refreshJoinGroup(code);
        // 维护上一次搜索
        lastSearchCode = code;
    })
    $("#groupList").on("click",".joinGroupButton",function () {
        let groupItemId = $(this).attr("group_id");
        let that = this;
        console.log("加入组：",groupItemId)
        POST(`/groupItem/joinGroup/${groupItemId}`).then(result=>{
            if (result.success) {
                refreshJoinGroup(lastSearchCode);
                noticeUpdateSubmittableCount()
            }else {
                alert("加入失败！"+result.message)
            }
        })
    })

</script>

</body>
</html>